<script setup>
const props = defineProps({
	dataItem:{
		type: Object,
		default: ()=>({})
	},
  userImg:{
    type: String,
    default: ''
  }
})
</script>

<template>
<div class="recommending-item" @click="toDetails">
	<div class="recommending-img">
    <img v-if="props.userImg" class="user-upload-img" :src="props.userImg" alt="">
		<img v-else class="no-img" src="@/assets/img-icon.png">
	</div>
	<div class="info">
		<p class="goods-name">UI/UX/视觉品牌设计作品集辅导作品集重塑/作品集优化</p>
		<div class="user-name">
			<div class="name">
				<img class="head" src="@/assets/user-head.png" alt="">
				<span class="online"></span>
				<span class="name-text">用户昵称</span>
			</div>
			<span class="tip" v-if="props.dataItem.isBond">保证金</span>
		</div>
		<div class="price">
			<img class="mack" src="@/assets/mack-icon.png" alt="">
			<span class="score">5.0</span>
			<span class="order-len">(1K+)</span>
			<span class="price-num"><span>¥</span>12000</span>
		</div>
	</div>
</div>
</template>

<style scoped lang="scss">
.recommending-item{
	display: flex;
	flex-direction: column;
	width: 282px;
	background: #fff;
  box-shadow: 0px 0px 16px 0px rgba(11,13,18,0.06);
  border: 1px solid rgba(25,30,40,0.08);
	border-radius: 16px 16px 16px 16px;
}
.recommending-img{
	width: 100%;
	height: 182px;
	cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6F8F9;
  border-radius: 16px 16px 0 0 ;
  .no-img{
    width: 60px;
    height: 40px;
    border-radius: 0;
  }
	img{
		width: 100%;
		height: 100%;
		border-radius: 16px 16px 0 0 ;
    object-fit: cover;
	}
}
.info{
	padding: 12px 16px;
	box-sizing: border-box;
	.goods-name{
		font-size: 15px;
		color: #191E28;
		line-height: 24px;
		font-weight: bold;
		margin-bottom: 12px;
		cursor: pointer;
		height: 48px;
	}
	.user-name{
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		.name{
			cursor: pointer;
			flex: 1;
			display: flex;
			align-items: center;
			.head{
				width: 24px;
				height: 24px;
				border-radius: 100%;
				margin-right: 6px;
			}
			.name-text{
				color: rgba(25,30,40,0.72);
			}
		}
		.tip{
			background: rgba(255,140,29,0.08);
			border-radius: 4px;
			color: #FF8C1D;
			padding: 2px 7px;
		}
	}
	.price{
		display: flex;
		align-items: center;
		line-height: 16px;
		margin-bottom: 4px;
		.mack{
			width: 16px;
			height: 16px;
			margin-right: 4px;
			position: relative;
			top: -1px;
			cursor: pointer;
		}
		.score{
			color: #191E28;
			margin-right: 2px;
			font-weight: bold;
			cursor: pointer;
		}
		.order-len{
			flex: 1;
			color: rgba(25,30,40,0.48);
			cursor: pointer;
		}
		.price-num{
			font-size: 20px;
			color: #FF4F4F;
			font-weight: bold;
			span{
				font-size: 14px;
			}
		}
	}
}
</style>